<template>
  <teleport to="#modal">
    <div class="modal d-block" v-if="visible" @click.self="handleCancel">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">{{ title }}</h5>
            <button type="button" class="close btn" data-dismiss="modal" aria-label="Close" @click="handleCancel">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <slot></slot>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal" @click="handleCancel">{{ leftBtntxt }}</button>
            <button type="button" class="btn btn-primary" @click="handleConfirm">{{ rightBtntxt }}</button>
          </div>
        </div>
      </div>
    </div>
  </teleport>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import useCreateDom from '@/hooks/useCreateDom';
export default defineComponent({
  name: 'modal',
  props: {
    title: String,
    visible: {
      type: Boolean,
      default: false
    },
    leftBtntxt: {
      type: String,
      default: '关闭'
    },
    rightBtntxt: {
      type: String,
      default: '确认'
    }
  },
  emits: ['modal-cancel', 'modal-confirm'],
  setup(props, { emit }) {
    useCreateDom('modal');

    const handleCancel = () => {
      emit('modal-cancel');
    };
    const handleConfirm = () => {
      emit('modal-confirm');
    };
    return { handleCancel, handleConfirm };
  }
});
</script>

<style lang="less" scoped>
.modal {
  background-color: rgba(0, 0, 0, 0.36);
  .modal-dialog {
    margin: 12rem auto;
  }
}
</style>
